<template>
    <div class="formData">
        <div class="top">
            <el-select v-model="value" placeholder="请选择查看天数" @change="getTable">
                <el-option v-for="(item,index) in timeData" :label="item.label" :key='index' :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" plain size="mini" @click="exportAllData">导出数据</el-button>
        </div>
        <el-table border :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column align="center" type="selection" width="30" fixed>
            </el-table-column>
            <el-table-column type="index" width="50" align="center" label="#" fixed>
            </el-table-column>
            <el-table-column prop="Personel" label="姓名" width="120" align="center" fixed>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="200" align="center" fixed>
            </el-table-column>
            <template v-for="(item,index) in base_title">
                <el-table-column :label="item.label" align="center">
                    <el-table-column label="上午" width="160" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.time[index]">{{scope.row.time[index].morning}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="下午" width="160" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.time[index]">{{scope.row.time[index].afternoon}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </template>
        </el-table>
    </div>

</template>

<script>
    // import { export_json_to_excel } from './api/ExportExcel.js'
    import { export_json_to_excel } from "../api/ExportExcel";
    export default {
        data() {
            return {
                // 多少天就是多少数据， 省略...
                tableData: [
                    {
                        "id": 1, "Personel": "丁一", "address": "北京",  "time": [
                            { "morning": "2020-07-01", "afternoon": "2020-07-01" },
                            { "morning": "2020-07-02", "afternoon": "2020-07-02" },
                            { "morning": "2020-07-03", "afternoon": "2020-07-03" },
                            { "morning": "2020-07-04", "afternoon": "2020-07-04" },
                        ]
                    },
                    {
                        "id": 2, "Personel": "王二", "address": "上海",  "time": [
                            { "morning": "2020-07-01", "afternoon": "2020-07-01" },
                            { "morning": "2020-07-02", "afternoon": "2020-07-02" },
                            { "morning": "2020-07-03", "afternoon": "2020-07-03" },
                            { "morning": "2020-07-04", "afternoon": "2020-07-04" },
                        ]
                    },
                    {
                        "id": 3, "Personel": "张三", "address": "广州",  "time": [
                            { "morning": "2020-07-01", "afternoon": "2020-07-01" },
                            { "morning": "2020-07-02", "afternoon": "2020-07-02" },
                            { "morning": "2020-07-03", "afternoon": "2020-07-03" },
                            { "morning": "2020-07-04", "afternoon": "2020-07-04" },
                        ]
                    },
                ],
                value: '',
                loading: false,
                base_title: [],
                valuetable: "",
                id:"",
                timeData: [
                    { label: "一周", value: "7" },
                    { label: "半月", value: "15" },
                    { label: "一月", value: "30" }
                ],
            }
        },
        created() {
            this.mGetDays();
        },
        mounted() {
            this.change_days();
        },
        methods: {
            change_days() {
                let that = this;
                that.base_title = [];
                let Max_length = that.valuetable;
                for (let i = 0; i < Max_length; i++) {
                    that.value_date = that.value_dateVal;
                    let param = {
                        label: that.getDay(i) + "" + (that.getWeek(that.getDay(i).toString())),
                        prop: that.getDay(i)
                    };
                    that.base_title.push(param);
                }
            },
            getDay(day) {
                let that = this;
                let value_day = new Date();
                let tYear = value_day.getFullYear();
                let tMonth = value_day.getMonth();
                let tDate = day + 1;
                tMonth = that.doHandleMonth(tMonth + 1);
                tDate = that.doHandleMonth(tDate);
                return tYear + "-" + tMonth + "-" + tDate;
            },
            getWeek(dateString) {
                let weekArray = ["(星期日)", "(星期一)", "(星期二)", "(星期三)", "(星期四)", "(星期五)", "(星期六)"];
                return weekArray[new Date(dateString).getDay()];
            },
            doHandleMonth(month) {
                let m = month;
                if (month.toString().length === 1) {
                    m = "0" + month;
                }
                return m;
            },
            mGetDays() {
                // 获取每个月的天数
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var d = new Date(year, month, 0);
                this.valuetable = d.getDate();
                this.timeData[2].value = this.valuetable;
            },
            getTable(num) {
                this.valuetable = num;
                this.change_days();
                this.$set(this.tableData)
            },
            exportAllData() {
                this.$confirm('默认导出当月的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if (this.tableData.length > 0) {
                        this.$message({
                            type: 'info',
                            showClose: true,
                            message: '正在导出，请稍后...'
                        })
                        this.tableData.forEach(item => {
                            item.index = this.id++;
                        })
                        let multiHeader = [["序号", "姓名", "地址"]]; // 一级表头
                        let tHeader = ["序号", "姓名", "地址"]; // 二级表头
                        let filterVal = ['index', 'Personel', 'address']; // 字段
                        this.base_title.forEach(item => {
                            multiHeader[0].push(item.label, "");
                            tHeader.push('上午', '下午');
                            filterVal.push('morning', 'afternoon');
                        })
                        let merges = ["A1:A2", "B1:B2", "C1:C2", "D1:E1", "F1:G1", "H1:I1", "J1:K1", "L1:M1", "N1:O1", "P1:Q1", "T1:U1", "V1:W1", "X1:Y1", "Z1:AA1", "AB1:AC1", "AD1:AE1", "AF1:AG1", "AH1:AI1", "AJ1:AK1", "AL1:AM1", "AN1:AO1", "AP1:AQ1", "AR1:AS1", "AT1:AU1", "AV1:AW1", "AX1:AY1", "AZ1:BA1", "BB1:BC1", "BD1:BE1", "BF1:BG1", "BH1:BI1", "BJ1:BK1", "BL1:BM1"];
                        const list = this.tableData;
                        const data = this.format(list);
                        export_json_to_excel({
                            multiHeader,
                            header: tHeader,
                            data,
                            merges,
                            filename: '考勤统计',
                            tableheader: "2"
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: '没有可导出的数据'
                        })
                    }
                    this.id = 1;
                }).catch(() => {
                    return
                })
            },
            format(jsonData) {
                let dataList = [];
                for(let i = 0; i< jsonData.length; i++) {
                    let list = [];
                    list.push(jsonData[i].index);
                    list.push(jsonData[i].Personel);
                    list.push(jsonData[i].address);
                    for (let j = 0; j < jsonData[0]['time'].length; j++) {
                        list.push(jsonData[i]['time'][j].morning);
                        list.push(jsonData[i]['time'][j].afternoon);
                    }
                    dataList.push(list);
                }
                return dataList;
            },
        }
    }

</script>

<style>
    .top {
        margin: 20px;
        text-align: left;
    }
</style>